import { createVipOrder, getVipSet } from '@/servers/api/userController';
import { toImages } from '@/utils';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import {
    Avatar,
    Button,
    Flex,
    Modal,
    Radio,
    RadioChangeEvent,
    Tabs,
    message,
} from 'antd';
import { Dispatch, SetStateAction, useEffect, useState } from 'react';
import './BuyVip.less';
const huodongtuiguang = require('@/assets/images/user/member/huodongtuiguang@2x.png');
const vip1 = require('@/assets/images/user/member/vip1@2x.png');
const suoyouzhaobiaoxiangmu = require('@/assets/images/user/member/suoyouzhaobiaoxiangmu@2x.png');
type IParams = {
    isModalOpen: boolean;
    setisModalOpen: Dispatch<SetStateAction<boolean>>;
};
const BuyVipModal: React.FC<IParams> = (props) => {
    const intl = useIntl();
    const { initialState } = useModel('@@initialState');
    const { site, user } = initialState as IGlobal.IInitialState;
    const [current, setcurrent] = useState<string>('om_price');
    const [vipCurrent, setvipCurrent] = useState(0);
    const [payType, setPayType] = useState('wxpay');
    const [vipList, setvipList] = useState([]);
    function doBuy() {
        message.error('开发中...请移步至小程序或移动端进行支付！');
        return;
        createVipOrder({
            vip_id: vipList[vipCurrent].id,
            vip_type: current,
            vip_price: vipList[vipCurrent][current],
            pay_type: payType,
            openid: '',
            method: 'app',
        }).then((res) => {
            console.log(res);
        });
    }
    function getVipSetFun() {
        getVipSet().then((res) => {
            const temp = res.data.map((item, index) => {
                return {
                    ...item,
                    label: intl.formatMessage({ id: item.name }),
                    key: index,
                };
            });
            setvipList(temp);
        });
    }
    function onChange(e: RadioChangeEvent) {
        setPayType(e.target.value);
    }
    function vipOnChange(e: number) {
        setvipCurrent(e);
    }
    useEffect(() => {
        const token = localStorage.getItem('token');
        if (token) {
            getVipSetFun();
        }
    }, []);
    return (
        <Modal
            width="50%"
            title={null}
            open={props.isModalOpen}
            onCancel={() => {
                props.setisModalOpen(false);
                message.warning('已取消');
            }}
            className="buyVip"
            keyboard={false}
            maskClosable={false}
            footer={null}
        >
            <p style={{ fontWeight: 600 }}>
                <FormattedMessage id="充值说明"></FormattedMessage>
            </p>
            <div className="user">
                <Avatar
                    src={<img src={toImages(user?.avatar)} alt="avatar" />}
                />
                {user?.vip?.name}
                {!!(user?.level && user.level > 0) && (
                    <>
                        <FormattedMessage id="有效期至"></FormattedMessage>：
                        {user.vip_expire_time}
                    </>
                )}
                <Flex
                    style={{ margin: '20px 0' }}
                    align="center"
                    justify="space-between"
                    className="flexBox"
                >
                    <div>
                        <img src={huodongtuiguang}></img>
                        <span>
                            <FormattedMessage id="推广置顶免费"></FormattedMessage>
                        </span>
                    </div>
                    <div>
                        <img src={vip1}></img>
                        <span>
                            <FormattedMessage id="图标免费认证"></FormattedMessage>
                        </span>
                    </div>
                    <div>
                        <img src={suoyouzhaobiaoxiangmu}></img>
                        <span>
                            <FormattedMessage id="参与竞标免费"></FormattedMessage>
                        </span>
                    </div>
                </Flex>
            </div>
            <Radio.Group onChange={onChange} value={payType}>
                <Radio value="wxpay">
                    <FormattedMessage id="微信支付"></FormattedMessage>
                </Radio>
                <Radio value="alipay">
                    <FormattedMessage id="支付宝支付"></FormattedMessage>
                </Radio>
            </Radio.Group>
            <p style={{ fontWeight: 600, marginTop: 30 }}></p>
            <Tabs
                defaultActiveKey={vipCurrent}
                items={vipList}
                onChange={vipOnChange}
            />
            {vipList.length > 0 && (
                <ul className="chongzhiList">
                    <li
                        onClick={() => {
                            setcurrent('om_price');
                        }}
                        className={current === 'om_price' ? 'bianse' : ''}
                    >
                        <div className="li-text">
                            <FormattedMessage id="一个月"></FormattedMessage>
                        </div>
                        <div className="li-money">
                            ￥{vipList && vipList[vipCurrent].om_price}
                        </div>
                    </li>
                    <li
                        onClick={() => {
                            setcurrent('tm_price');
                        }}
                        className={current === 'tm_price' ? 'bianse' : ''}
                    >
                        <div className="li-text">
                            <FormattedMessage id="三个月"></FormattedMessage>
                        </div>
                        <div className="li-money">
                            ￥{vipList && vipList[vipCurrent].tm_price}
                        </div>
                    </li>
                    <li
                        onClick={() => {
                            setcurrent('oy_price');
                        }}
                        className={current === 'oy_price' ? 'bianse' : ''}
                    >
                        <div className="li-text">
                            <FormattedMessage id="一年"></FormattedMessage>
                        </div>
                        <div className="li-money">
                            ￥{vipList && vipList[vipCurrent].oy_price}
                        </div>
                    </li>
                </ul>
            )}

            <Button
                type="primary"
                block
                style={{ marginTop: 20 }}
                onClick={doBuy}
            >
                <FormattedMessage id="立即充值"></FormattedMessage>
            </Button>
        </Modal>
    );
};
export default BuyVipModal;
